<template>
    <div class="pv">
       <!-- <div class="sear">
           <div style="font-size:16px;color:#9A9A9A">日期篩選</div>
           <div>
               <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="開始日期"
                    end-placeholder="結束日期"
                    value-format="yyyy-MM-dd">
                </el-date-picker>
           </div>
           <div>
               <div class="btn" @click="btn">
                   查詢
               </div>
           </div>
       </div> -->
       <div class="tit">
           我的PV值
       </div>
       <div class="item">
           <div @click="gopvmineo(2)">
               <div>個人銷售</div>
               <div v-if="list.onePv && !list.sellPv">{{list.onePv}}PV</div>
               <div v-if="list.sellPv && !list.onePv">{{list.sellPv}}PV</div>
               <div v-if="list.onePv && list.sellPv">{{list.onePv + list.sellPv}}PV</div>
               <div v-if="!list.onePv && !list.sellPv">0PV</div>
           </div>
           <div @click="gopvmineo(3)">
               <div>差額分成</div>
               <div>{{list.differencePv?list.differencePv:0}}PV</div>
           </div>
           <div style="box-shadow: 0px 0px 0px 0px rgba(206, 206, 206, 0.53);"></div>
       </div>
       <div class="item" style="border-bottom:0px">
           <div @click="gopvmineo(4)">
               <div>培育分成</div>
               <div>{{list.cultivaPv?list.cultivaPv:0}}PV</div>
           </div>
           <div @click="gopvmineo(5)">
               <div>領導分成</div>
               <div>{{list.leadPv?list.leadPv:0}}PV</div>
           </div>
           <div @click="gopvmineo(6)">
               <div>管理分成</div>
               <div>{{list.managPv?list.managPv:0}}PV</div>
           </div>
       </div>
       <div class="item" style="border-bottom:0px">
           <div @click="gopvmineo(9)">
               <div>環球分成</div>
               <div>{{list.globalPv?list.globalPv:0}}PV</div>
           </div>
           <div @click="gopvmineo(8)">
               <div>亞太區分成</div>
               <div>{{list.pacificPv?list.pacificPv:0}}PV</div>
           </div>
           <div @click="gopvmineo(7)">
               <div>亞洲分成</div>
               <div>{{list.asiaPv?list.asiaPv:0}}PV</div>
           </div>
       </div>
    </div>
</template>
<script>
// PV分成类型：1：购买PV；2：销售分成；3：差额分成；4：培育分成；5：领导分成；6：管理分成；7：亚洲分成；8：亚太区分成；9：环球分成
import {mypv} from '@/api/user';
import { getToken,removeToken } from '@/utils/auth' // 驗權
export default {
    data(){
        return{
           value1:'',
           list:{}
        }
    },
    methods:{
      gopvmineo(e){
        if(e == 2){
            this.$router.push({path:'/pvmineth',query:{type:e}})
        }else{
            this.$router.push({path:'/pvmineo',query:{type:e}})
        }
      },
      lis(){
        mypv({userId:getToken()}).then(res => {
          if(res.errno == 0){
            this.list = res.data
          }else{
            this.$message(res.errmsg);
          }
        })
       },
       btn(){
           console.log(this.value1[0])
            console.log(this.value1[1])
        mypv({userId:getToken(),beginTime:this.value1[0],endTime:this.value1[1]}).then(res => {
               if(res.errno == 0){
                   this.list = res.data
               }else{
                   this.$message(res.errmsg);
               }
           })
       }
    },
    mounted(){
        this.lis()
    }
}
</script>
<style scoped>
.pv{
    width: 100%;
    /* height: 1358px; */
    background: #FFFFFF;
    box-sizing: border-box;
    padding: 15px;
}
.sear{
    display: flex;
    align-items: center;
    padding-bottom: 15px;
}
.sear div{
    margin-left: 15px;
}
.btn{
    width: 93px;
height: 35px;
background: #BE9A68;
border-radius: 4px;
 font-size: 16px;
 color: white;
 line-height: 35px;
 text-align: center;
}
.tit{
    padding: 24px 0;
    border-top: 1px solid #E4E4E4;
    border-bottom: 1px solid #E4E4E4;
    text-align: center;
    color: #111111;
    font-weight: bold;
    font-size: 30px;
}
.item{
    display: flex;
    padding: 50px 72px;
    justify-content: space-between;
    border-bottom: 1px solid #E4E4E4;
}
.item>div{
    width: 214px;
    height: 154px;
    background: #FFFFFF;
    box-shadow: 1px 6px 21px 0px rgba(206, 206, 206, 0.53);
    border-radius: 20px;
    display:flex;
    flex-direction: column;
    color: #111111;
    font-size: 24px;
    font-weight: bold;
    align-items: center;
    justify-content: center;
}
.item>div>div:nth-child(2){
    font-size: 30px;
    margin-top: 10px;
}
.pagination-container>>>.el-pagination.is-background .el-pager li:not(.disabled).active{
  background: #BE9A67;
  color: white;
}
.pagination-container>>>.el-pagination.is-background .el-pager li:hover{
  color: #BE9A67;
}
.pagination-container>>>.el-pagination__editor.el-input .el-input__inner:hover,.pagination-container>>>.el-pagination__editor.el-input .el-input__inner:active{
  border-color: #BE9A67;
}
.pagination-container>>>.el-input__inner:active{
  border-color: #BE9A67;
}
.pagination-container>>>.el-select .el-input.is-focus .el-input__inner,.pagination-container>>>.el-pagination__sizes .el-input .el-input__inner:hover,.pagination-container>>>.el-select .el-input__inner:focus{
  border-color: #BE9A67;
}
.pagination-container>>>.el-input__inner:focus{
  border-color: #BE9A67;
}
</style>